<template>
  <el-row>
    <el-col>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="用户名称">
<!--          <el-autocomplete-->
<!--              v-model="searchForm.username"-->
<!--              :fetch-suggestions="querySearch"-->
<!--              class="inline-input"-->
<!--              placeholder="请输入用户名"-->
<!--              @select="handleSelect"-->
<!--          />-->
          <SearchInput v-on:getText="getText" :data="data" keyword="username" label="请输入用户名称"></SearchInput>
        </el-form-item>
        <el-form-item label="状态">
          <el-select  placeholder="状态筛选" v-model="searchForm.status">
            <el-option label="全部" value=""></el-option>
            <el-option label="停用" value="2"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="searchUser()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh" @click="clean()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-button type="success" :icon="Plus" @click="addDialog = true">新增</el-button>
    <el-button type="danger" :icon="Delete">批量删除</el-button>
  </el-row>
  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table :data="getData"
                style="width: 100%"
                header-cell-style="background:#f8f8f9;color:#535a6c">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" sortable label="用户编号"></el-table-column>
        <el-table-column prop="username" sortable label="用户名"></el-table-column>
        <el-table-column prop="creater" sortable label="创建者"></el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间"></el-table-column>
        <el-table-column prop="status" sortable label="状态">
          <template  #default="scope">
            <el-switch
                v-model="scope.row.status"
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="停用"
                @click="editStatus(scope.row)"
                :active-value=0
                :inactive-value=2 />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button-group class="ml-4">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此用户"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此用户"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="更改用户密码"
                  placement="top"
              >
                <el-button @click="upPasswordDialog = true" :icon="Lock" type="success" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="查看用户全部信息"
                  placement="top"
              >
                <el-button @click="userInfo(scope.row)" :icon="Search" size="small"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加用户" width="400px" center>
    <AddUser></AddUser>
  </el-dialog>

  <el-dialog v-model="queryDialog" width="800px" center>
    <el-descriptions
        title="详细信息"
        direction="vertical"
        :column="4"
        :size="size"
        border
    >
      {{getDeptT(userInfoTxt.deptId)}}
      <el-descriptions-item label="用户编号">{{userInfoTxt.id}}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{userInfoTxt.username}}</el-descriptions-item>
      <el-descriptions-item label="加密后密码">{{userInfoTxt.password}}</el-descriptions-item>
      <el-descriptions-item label="盐度">{{userInfoTxt.salt}}</el-descriptions-item>
      <el-descriptions-item label="头像">{{userInfoTxt.photo}}</el-descriptions-item>
      <el-descriptions-item label="创建者">{{userInfoTxt.creater}}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{userInfoTxt.createTime}}</el-descriptions-item>
      <el-descriptions-item label="状态">{{userInfoTxt.status===0?'正常':userInfoTxt.status===1?'被删除':'被停用'}}</el-descriptions-item>
      <el-descriptions-item label="角色">{{roleName}}</el-descriptions-item>
      <el-descriptions-item label="所属部门">{{deptName}}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <el-dialog v-model="upPasswordDialog" title="修改用户密码" width="400px" center>
    <el-form ref="forRef" :model="user" label-width="120px">
      <el-form-item label-width="新的密码">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button @click="confirm()">确认修改</el-button>
    </el-form-item>
  </el-dialog>

</template>
<script setup>
import {Refresh,Search,Plus,Delete,Edit,Lock} from "@element-plus/icons-vue";
import AddUser from "@/view/user/AddUser";
import SearchInput from "@/components/search/SearchInput";
</script>
<script>
import {addUser, getAllUser,updateStatus,getUser} from "@/api/user";
import {getDept} from "@/api/dept";
import {getRoleById} from "@/api/role";
import {ElMessage} from "element-plus";
export default {
  name: "PersonalCenter",
  data() {
    return {
      data: '',
      addDialog:false,
      queryDialog:false,
      upPasswordDialog:false,
      deptName:'',
      roleName:'',
      user:{
        password:''
      },
      searchForm:{
        username:'',
        status:'',
      },
      userInfoTxt:''
    }
  },
  mounted() {
    this.getAllUse();
  },
  methods: {
    getText(text) {
      this.searchForm.username = text
    },
    async searchUser(){
      const t = await getUser(this.searchForm);
      this.data = t.data.data;
    },
    clean(){
      this.searchForm = {
          username:'',
          status:'',
    }
    },
    async getAllUse() {
      const t = await getAllUser();
      this.data = t.data.data;
    },
    async getDeptT(id) {
      const t = await getDept({id:id});
      const a = t.data.data
      a.forEach((item)=>{
        if (item['id'] === id) {
          this.deptName = item['deptName']
        }
      })
    },
    async editStatus(val) {
      const t = await updateStatus({id:val.id,status:val.status})
      if (t.data.code === 200) {
        ElMessage({
          type:"success",
          message:"更新用户状态成功"
        })
        await this.getAllUse();
      }
    },
    async confirm(){
      const rep = await addUser(this.user)
      console.log(rep)
    },
    async userInfo(user) {
      const a = await getRoleById(user.roleId);
      this.roleName = a.data.data.roleName;
      this.userInfoTxt = user
      this.queryDialog = true
    }
  },
  computed:{
    getData() {
      return this.data;
    }
  }
}
</script>

<style>

</style>